import React from "react";
import styles from './index.module.scss';
import {TabsFormBox} from '@/components/FormLayout';
import dvTool from "@/pages/dv/dvTool";
import {ITabsFields, ITabPanel} from "@/pages/dv/constants/EnumCommon";

interface IProps {
  selectedChartKey?: string;
  advanceConfig?: DV.IAdvanceConfig | {option: object};
  uid?: string;
  type?: string;
  frameType?: string;
}

interface IState {
  panes: ITabPanel[]
}

/**
 * 高级tabs表单模板
 */
export default class TabsFormPanel extends React.PureComponent<IProps, IState> {
  public form: any;
  public uid: string;
  public advanceConfig: DV.IAdvanceConfig | {
    disabledCustomConfig: boolean;
    option: object
  };
  public chart: DV.IChartActions;
  public myChart: any;

  constructor(props: IProps) {
    super(props);
    this.uid = props.uid || '';
    this.advanceConfig = props.advanceConfig || {
      disabledCustomConfig: false,
      option: {}
    };
    this.state = {
      panes: this.getAllPanes()
    };
    this.onValuesChange = this.onValuesChange.bind(this);
    this.init();
  }

  componentDidMount(): void {
    this.setInitialValues();
  }

  componentWillReceiveProps(nextProps: Readonly<IProps>, nextContext: any): void {

    // if(nextProps.uid !== this.uid){
    //   this.setInitialValues();
    // }
  }

  init(){
    let instance = dvTool.getChartInstance(this.uid);
    this.chart = instance.chart;
    this.myChart = instance.myChart;
  }

  /**
   * 合成全部tabs枚举
   */
  private getAllPanes() {
    return this.getBasicPanes()
      .concat(this.getPrivatePanes())
      .map((tabPane: ITabPanel) => ({...tabPane, closable: false}))
  }

  /**
   * 私有配置枚举
   */
  public getPrivatePanes(): Array<ITabPanel> {
    return []
  }

  /**
   * 图表框架基础配置（echarts、hcharts...）
   */
  public getBasicPanes(): Array<ITabPanel> {
    return []
  }

  /**
   * 返回的数据
   * @param changedValues
   * @param allValues
   */
  public onValuesChange = (changedValues: any, allValues: any) => {

  }

  /**
   * 获取所有配置项
   */
  protected getAllFields(){
    const getStringFields = (fieldsData: ITabsFields[], fields: string[]) => {
      if(!Array.isArray(fields)) fieldsData = [];
      fieldsData.forEach((field: ITabsFields) => {
        if(field.formItemProps && field.formItemProps.name){
          fields.push(String(field.formItemProps.name));
        }
        if(field.groupFields){
          getStringFields(field.groupFields, fields);
        }
      })
    }
    let fields: string[] = [];
    this.state.panes.forEach(pane => {
      if(Array.isArray(pane.fields)){
        getStringFields(pane.fields, fields);
      }
    })
    return fields;
  }

  /**
   * 合并初始值
   * @param initialValues
   */
  public mergeDefaultValue(initialValues: object): object{
    return initialValues
  }

  /**
   * 获取默认配置(如果[this.state.panes]枚举中的字段默认值已设置，此处无需重复设置)
   */
  public getInitialValues(){
    return {}
  }

  /**
   * 设置默认配置
   */
  private setInitialValues(){
    const initialValues = this.advanceConfig.option || {};
    const formatInitialValues = this.mergeDefaultValue(initialValues) || {}
    this.form.setFieldsValue(formatInitialValues);
  }


  render() {

    return <div className={styles.chartPanelContent}>
      <TabsFormBox
        disabledCustomConfig={Boolean(this.advanceConfig.disabledCustomConfig)}
        panes={this.state.panes}
        initialValues={this.getInitialValues()}
        onValuesChange={this.onValuesChange}
        getForm={(form: any) => this.form = form}
      />
    </div>;
  }
}
